<template>
  <div class="profile-container">
    <el-card shadow="never">
      <div slot="header" class="clearfix">
        <span>基本信息</span>
      </div>
      <!-- 用户ID -->
      <div class="item">
        <div class="title">
          <div class="div">用</div>
          <div class="div">户</div>
          <div class="div">ID</div>
        </div>
        <div class="value">{{ user.id }}</div>
      </div>

      <!-- 用户昵称 -->
      <div class="item">
        <div class="title">
          <div class="div">用</div>
          <div class="div">户</div>
          <div class="div">昵</div>
          <div class="div">称</div>
        </div>
        <el-input style="width: 300px" v-if="edit.showNickname" @blur="save" v-model="userForm.nickname"></el-input>
        <div class="value" v-else>{{ user.nickname }}</div>

        <el-button class="edit-btn" type="text" @click="edit.showNickname = true">修改昵称</el-button>
      </div>

      <!-- 权限 -->
      <!-- <div class="item">
        <div class="title">
          <div class="div">权</div>
          <div class="div">限</div>
        </div>
        <div class="value">
          <el-tag v-if="user.role === 0">用户</el-tag>
          <el-tag type="danger" v-else="user.role === 1">管理员</el-tag>
        </div>
      </div> -->

      <!-- 个人简介 -->
      <!-- <div class="item">
        <div class="title">
          <div class="div">个</div>
          <div class="div">人</div>
          <div class="div">简</div>
          <div class="div">介</div>
        </div>

        <el-input style="width: 300px" v-if="edit.showIntro" @blur="save" v-model="userForm.intro"></el-input>
        <div v-else class="value">{{ user.intro }}</div>
        <el-button class="edit-btn" type="text" @click="edit.showIntro = true">编辑简介</el-button>
      </div> -->

      <!-- 手机号 -->
      <div class="item">
        <div class="title">
          <div class="div">手</div>
          <div class="div">机</div>
          <div class="div">号</div>
        </div>

        <el-input style="width: 300px" v-if="edit.showPhone" @blur="save" v-model="userForm.phone"></el-input>
        <div v-else class="value">{{ user.phone }}</div>
        <el-button class="edit-btn" type="text" @click="edit.showPhone = true">编辑手机号</el-button>
      </div>

      <!-- 地址 -->
      <div class="item">
        <div class="title">
          <div class="div">地</div>
          <div class="div">址</div>
        </div>

        <el-input style="width: 300px" v-if="edit.showAddress" @blur="save" v-model="userForm.address"></el-input>
        <div v-else class="value">{{ user.address }}</div>
        <el-button class="edit-btn" type="text" @click="edit.showAddress = true">编辑地址</el-button>
      </div>
    </el-card>


  </div>
</template>

<script>
import storage from '@/utils/storage'
export default {
  name: '',
  data() {
    return {
      user: {},
      edit: {
        showNickname: false,
        showIntro: false,
        showPhone: false,
        showAddress: false,
      },
      userForm: {
        id: '',
        nickname: '',
        intro: '',
        phone: '',
        address: '',
      },
      dialog: {
        visible: false,
        realName: '',
        idCard: '',
      },
      rules: {
        realName: [
          { required: true, message: '请输入真实姓名', trigger: 'blur' },
          { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' },
        ],
        idCard: [
          { required: true, message: '请输入身份证', trigger: 'blur' },
          { min: 18, max: 18, message: '长度为18个字符', trigger: 'blur' },
        ],
      },
    }
  },

  created() {
    this.getUserInfo()
  },
  mounted() { },
  methods: {
    getUserInfo() {
      this.user = storage.getLoginUser()
      console.log(this.user);

      this.userForm = this.user
    },

    updateUser() {
      this.dialogVisible = false
      this.$api.user.updateById(this.userForm).then((res) => {
        if (res.code == 200) {
          this.$api.user.getById(this.user.id).then((res) => {
            storage.setLoginUser(res.data)
            storage.setuser(res.data)
            this.$emit('flush')
          })
        }
      })
    },
    save() {
      this.edit.showNickname = false
      this.edit.showIntro = false
      this.edit.showPhone = false
      this.edit.showAddress = false
      this.$confirm('是否保存修改?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.$api.user.updateById(this.userForm).then((res) => {
            if (res.code === 200) {
              this.$message({
                type: 'success',
                message: '修改成功!',
              })
              this.$api.user.getById(this.user.id).then((res) => {
                storage.setLoginUser(res.data)
                this.getUserInfo()
              })
            }
          })
        })
        .catch(() => {
          this.userForm.nickname = this.user.nickname
          this.userForm.intro = this.user.intro
          this.$message({
            type: 'info',
            message: '已取消修改',
          })
        })
    },
  },
}
</script>

<style lang="scss" scoped>
.profile-container {
  margin: 50px 0;
  height: 600px;

  .el-card {
    background-color: white;
    border: 1 solid black;
    border-radius: 0;
    margin-bottom: 10px;

    .clearfix {
      span {
        color: black;
        font-weight: 600;
      }
    }
  }

  .item {
    position: relative;
    height: 40px;
    display: flex;
    margin-bottom: 10px;

    &:last-child {
      margin: 0;
    }

    .title {
      display: flex;
      width: 64px;
      justify-content: space-between;
      margin-right: 40px;
      align-items: center;
    }

    .value {
      line-height: 40px;

      .el-tag {
        margin-right: 10px;
      }
    }

    .edit-btn {
      position: absolute;
      right: 0;
    }

    .el-dialog__wrapper {
      width: 700px;
      margin: auto;
    }
  }
}
</style>